<template>
	<view class="content">
        <u-navbar bgColor="#fff" 
            :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="补卡记录">
        </u-navbar>
        
        <view class="uni-area">
            <!-- 补卡列表 -->
            <view class="u-m-t-50">
                <text class="u-font-32 font-bold">补卡列表</text>
                <view v-for="(tem,ind) in page.list" :key="ind" @tap.stop="bukaDetail(ind)" class="u-m-t-30 uni-shadow u-p-t-10">
                    <u-row customStyle="flex-wrap:wrap">
                        <u-col v-for="(item,index) in tem" :key="index" :span="item.span" class="u-m-t-20 col u-font-26">
                            <text class="u-m-r-20 uni-dec-color">{{item.title}}</text>
                            <text v-if="item.field=='ywzt' && item.value=='办结'" style="color:#999999">{{item.value}}</text>
                            <text v-if="item.field=='ywzt' && item.value=='临时'" style="color:#f0ad4e">{{item.value}}</text>
                            <text v-if="item.field=='ywzt' && item.value=='注销'" style="color:#dd524d">{{item.value}}</text>
                            <text v-if="item.field=='ywzt' && item.value=='办理中'" style="color:#007aff">{{item.value}}</text>
                            <text v-if="item.field=='ywzt' && item.value=='签收中'" style="color:#333333">{{item.value}}</text>
                            <text v-if="item.field!='ywzt'" class="u-line-1" :style="{maxWidth:item.span==12?'70%':'62%'}">{{item.value}}</text>
                        </u-col>
                    </u-row>
                </view>
            </view>
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                rybh: null, // 人员编号
                // 分页相关
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                item: [
                    { field:'xm', span: 6, title:'姓名', value:'安薪乐' },
                    { field:'xb', span: 6, title:'性别', value:'安薪乐' },
                    { field:'jsgz_label', span: 6, title:'从事工种', value:'安薪乐' },
                    { field:'bzmc', span: 6, title:'班组名称', value:'安薪乐' },
                    { field:'zjhm', span: 12, title:'证件号码', value:'安薪乐' },
                    { field:'gcmc', span: 12, title:'项目名称', value:'安薪乐' },
                    { field:'bksj', span: 12, title:'补卡时间', value:'安薪乐' },
                    { field:'bkyy', span: 12, title:'补卡原因', value:'安薪乐' },
                    { field:'bklx', span: 6, title:'补卡类型', value:'安薪乐' },
                    { field:'ywzt', span: 6, title:'业务状态', value:'安薪乐' },
                ],
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], 
                }
			}
		},

        onReady(){},

        // 页面滚动
        onPageScroll(e){
            this.page.scrollTop = e.scrollTop
        },
        // 页面滚动到底部触发
        onReachBottom(){
            if( this.page.length < this.page.total ){
                this.paging.pageNum ++
                this.status = 'loading'
                this.getList()
            }else{
                this.page.status = 'nomore'
            }
        },


		onLoad(option) {
            this.rybh = option.rybh
            this.getList()
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 补卡详情
            bukaDetail(index){
                if( index==0 ){
                    uni.navigateTo({ url: '/pages/kaoqin-bag/buka-detail?type=look' })
                }else{
                    uni.navigateTo({ url: '/pages/kaoqin-bag/buka-detail?type=shenpi' })
                }
            },


            // 补卡列表
            getList(){
                uni.showLoading({ title:'加载中' })
                this.$request(this,this.$apis.makeCardList,{rybh:this.rybh}).then(res=>{
                    console.log('补卡列表',res)
                    this.page.total = res.total
                    const { rows } = res
                    if(  rows.length  ){
                        this.status = 'loadmore'
                        rows.map((v,i)=>{
                            const temporaryData = JSON.parse(JSON.stringify(this.item))
                            temporaryData.map((a,b)=>{
                                if( a.field == 'zjhm' ){ // 证件号码
                                    a.value = this.$tools.formatIdentity(v[a.field])
                                }else if( a.field == 'bklx' ){ // 补卡类型
                                    a.value = v[a.field]==1?'进场':'离场'
                                }else if( a.field=='ywzt' ){ // 业务状态
                                    a.value = v[a.field]==0?'办结':v[a.field]==1?'临时':v[a.field]==2?'注销':v[a.field]==3?'办理中':'签收中'
                                }else{
                                    a.value = v[a.field]?v[a.field]:'暂无数据源'
                                }
                            })
                            this.page.list.push(temporaryData)
                        })
                    }else{
                        this.status = 'nomore'
                        uni.$u.toast('暂未查询到人员列表相关数据')
                    }
                })
            },

            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0 })
            },
            

            getTest(){
                let api = JSON.parse(JSON.stringify(this.$apis.CommonDictionaries))
                api.url+='worktype'
                this.$request(this,api,{}).then(res=>{
                    console.log('123',res)
                }).then()
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .col{
            flex-direction: row,
        }
    }
</style>
